<script setup lang="ts">
// 生意参谋 - 竞争-品牌识别-销售分析-关键指标对比
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import {SycmBrand, SycmBrandLists, SycmBrandMonitor} from "~/contentScripts/views/sycm/brand_monitor/SycmBrandMonitor";
import AnalysisSaleChart from "~/contentScripts/views/sycm/brand_monitor/AnalysisSaleChart.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import {SycmTableUtils} from "~/utils/sycm/SycmTableUtils";
import Trans from "~/utils/sycm/trans";

const brandLists = ref<SycmBrandLists>();
const loginVisible = ref<boolean>(false);
const visible = ref<boolean>(false);
const showZs = ref<boolean>(false);
const columns = ref<any[]>([]);
const dataSource = ref<any[]>([]);
const date = ref<string>();
const loading = ref<boolean>(false);
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'brand',
      title: '品牌名称',
      dataType: 'brand',
      width: 200,
      fixed: 'left',
      dataField: {
        brand_name: 'brand.title',
        brand_logo: 'brand.logo',
        // brand_url:'brand.brand_url',
      }
    }, {
      dataIndex: 'type',
      title: '类别',// 品牌1 品牌2 品牌2
      width: 80,
      sorter: (a: any, b: any) => a.type.localeCompare(b.type),
      dataType: 'custom',
      slot: 'type',
      align: 'center',
    },
    {
      dataIndex: 'date',
      title: '时间',
      sorter: (a: any, b: any) => a.date.localeCompare(b.date),
    },
    {
      dataIndex: 'TradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.TradeIndex - b.TradeIndex,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 2);
      }
    },
    {
      dataIndex: 'UvIndex',
      title: showZs.value ? '流量指数' : '访客数',
      sorter: (a: any, b: any) => a.UvIndex - b.UvIndex,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0);
      }
    },
    {
      dataIndex: 'PayRateIndex',
      title: showZs.value ? '支付转换指数' : '转化率',
      sorter: (a: any, b: any) => a.UvIndex - b.UvIndex,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranRatio(showZs.value, text);
      }
    },
    {
      dataIndex: 'PayByrCntIndex',
      title: showZs.value ? '客群指数' : '支付买家数',
      sorter: (a: any, b: any) => a.PayByrCntIndex - b.PayByrCntIndex,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0);
      }
    },
    {
      dataIndex: 'CustomerPrice',
      title: '客单价',
      sorter: (a: any, b: any) => a.CustomerPrice - b.CustomerPrice,
    },
    { // 搜索人数
      dataIndex: 'SeIpvUvHits',
      title: '搜索人数',
      sorter: (a: any, b: any) => a.SeIpvUvHits - b.SeIpvUvHits,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0);
      }
    },
    { // 搜索占比
      dataIndex: 'SeIpvUvHitsRate',
      title: '搜索占比',
      sorter: (a: any, b: any) => (a.SeIpvUvHitsRate) - (b.SeIpvUvHitsRate),
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (isNaN(text) || !text) {
          return '0.00%';
        }
        return (text * 100).toFixed(2) + '%';
      }
    },
    { // 收藏人数
      dataIndex: 'CltHits',
      title: showZs.value ? '收藏人气' : '收藏人数',
      sorter: (a: any, b: any) => a.CltHits - b.CltHits,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0);
      }
    },
    { // 收藏率
      dataIndex: 'scl',
      title: '收藏率',
      sorter: (a: any, b: any) => (a.CltHits / a.UvIndex) - (b.CltHits / b.UvIndex),
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (!record.CltHits || !record.UvIndex) {
          return '0.00%';
        }
        return ((Trans.number(record.CltHits) / Trans.number(record.UvIndex)) * 100).toFixed(2) + '%';
      }
    },
    { // 加购人数
      dataIndex: 'CartHits',
      title: showZs.value ? '加购人气' : '加购人数',
      sorter: (a: any, b: any) => a.CartHits - b.CartHits,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 0);
      }
    },
    { // 加购率
      dataIndex: 'jgl',
      sorter: (a: any, b: any) => (a.CartHits / a.UvIndex) - (b.CartHits / b.UvIndex),
      title: '加购率',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (!record.CartHits || !record.UvIndex) {
          return '0.00%';
        }
        return ((Trans.number(record.CartHits) / Trans.number(record.UvIndex)) * 100).toFixed(2) + '%';
      }
    },
    { // 收藏加购率
      dataIndex: 'scjgl',
      sorter: (a: any, b: any) => ((a.CartHits + a.CltHits) / a.UvIndex) - ((b.CartHits + b.CltHits) / b.UvIndex),
      title: '加购率',
      dataType: 'customRender',
      render: (text: any, record: any) => {
        if (!(record.CartHits + record.CltHits) || !record.UvIndex) {
          return '0.00%';
        }
        return (((Trans.number(record.CartHits) + Trans.number(record.CltHits)) / Trans.number(record.UvIndex)) * 100).toFixed(2) + '%';
      }
    },
    { // UV价值
      dataIndex: 'UVValue',
      title: 'UV价值',
      sorter: (a: any, b: any) => a.UVValue - b.UVValue,
    },
    {
      dataIndex: 'PrePayAmtIndex',
      title: showZs.value ? '预售定金交易指数' : '预售定金交易金额',
      width: 160,
      sorter: (a: any, b: any) => a.PrePayAmtIndex - b.PrePayAmtIndex,
      dataType: 'customRender',
      render: (text: any) => {
        return SycmTableUtils.tranNumber(showZs.value, text, 2);
      }
    },
    {
      dataIndex: 'PrePayItmCnt',
      title: showZs.value ? '预售定金支付买家数' : '预售定金支付买家数',
      width: 160,
      sorter: (a: any, b: any) => a.PrePayItmCnt - b.PrePayItmCnt,
    },
    {
      dataIndex: 'fstOnsItmCnt',
      title: showZs.value ? '上新商品数' : '上新商品数',
      sorter: (a: any, b: any) => a.fstOnsItmCnt - b.fstOnsItmCnt,
    }
  ]
}
const calcDataSource = () => {
  const arr: any[] = [];
  const getField = (type: number, index: number) => {
    let key = 'brand1'
    if (type === 1) {
      key = 'brand1';
    } else if (type === 2) {
      key = 'brand2';
    } else if (type === 3) {
      key = 'brand3';
    }
    let d: SycmBrand = brandLists.value[key];
    let res: any = {};
    for (const brandTrendKey in d.brandTrend) {
      if (d.brandTrend.hasOwnProperty(brandTrendKey)) {
        const brandTrend = d.brandTrend[brandTrendKey];
        if (typeof brandTrend !== 'undefined' && typeof brandTrend[index] !== 'undefined') {
          res[brandTrendKey] = brandTrend[index];
        } else {
          res[brandTrendKey] = null;
        }
      }
    }
    return res;
  }
  brandLists.value?.brand1?.brandTrend.UvIndex.map((item: any, index) => {
    if (item === null) {
      return;
    }
    arr.push({
      brand: {
        title: brandLists.value?.brand1?.name,
        logo: brandLists.value?.brand1?.picUrl,
      },
      type: '品牌1',
      date: dates.value[index],
      ...getField(1, index),
    });
    if (brandLists.value?.brand2) {
      arr.push({
        brand: {
          title: brandLists.value?.brand2?.name,
          logo: brandLists.value?.brand2?.picUrl,
        },
        type: '品牌2',
        date: dates.value[index],
        ...getField(2, index),
      });
    }
    if (brandLists.value?.brand3) {
      arr.push({
        brand: {
          title: brandLists.value?.brand3.name,
          logo: brandLists.value?.brand3.picUrl,
        },
        type: '品牌3',
        date: dates.value[index],
        ...getField(3, index),
      });
    }
  });
  dataSource.value = arr.reverse();
}
const dates = ref<string[]>([]);

const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  },__option)) {
    loading.value = true;
    dates.value = await SycmBrandMonitor.getDates();
    brandLists.value = await SycmBrandMonitor.assignBrandListTrend(await SycmBrandMonitor.getBrands());
    // console.log(data);
    // return;
    date.value = document.querySelector(".oui-date-picker-current-date").innerHTML.replaceAll('统计时间', '').replaceAll(' ', '').replaceAll('\n', '').replaceAll('\t', '');
    // shopLists.value = await SycmShopAnalysisSale.assignShopListTrend(await SycmShopAnalysisSale.getShops());
    console.log(brandLists.value);
    calcColumns();
    calcDataSource();
    loading.value = false;
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcDataSource();
});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle" :loading="loading">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal :title="`竞争-品牌分析-关键指标对比`" width="95%" style="top: 20px;" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <AnalysisSaleChart :brand-lists="brandLists" :dates="dates" :show-zs="showZs"/>
      <base-table table-name="竞争-品牌分析-关键指标对比" :columns="columns" :data-source="dataSource"
                  :scroll="{
        x:2200,
        y:400,
      }"
      >
        <template #type="record">
          <a-tag color="green" v-if="record.type==='品牌1'">
            品牌1
          </a-tag>
          <a-tag color="purple" v-else-if="record.type==='品牌2'">
            品牌2
          </a-tag>
          <a-tag color="orange" v-else-if="record.type==='品牌3'">
            品牌3
          </a-tag>
        </template>
      </base-table>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
